<template>
	<div class="dialog-contain">
		<el-dialog
			v-model="dialogVisible"
			width="50%"
			align-center
			:show-close="false"
			@close="handleClose"
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<div :id="titleId" :class="titleClass">权限分配</div>
					<svg-icon icon-class="close-icon" @click="close" />
				</div>
			</template>
			<div class="content-box">
				<treeSelect :data="treeData['tree1']" ref="treeRef1"></treeSelect>
				<!-- <treeSelect :data="treeData['tree2']" ref="treeRef2"></treeSelect> -->
				<!-- <treeSelect :data="treeData['tree3']" ref="treeRef3"></treeSelect> -->
				<treeSelect
					:data="treeData['tree4']"
					ref="treeRef4"
					:isTree="false"
				></treeSelect>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="small" @click="dialogVisible = false" class="cancel button_cancel2">
						取 消
					</el-button>
					<el-button size="small" @click="submitHandler" class="button_view">保存配置</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { ElDialog, ElButton, ElNotification } from "element-plus";
import treeSelect from "./treeSelect.vue";
import systemApi from "@/views/systemSetting/systemSetting";

// ---弹窗显隐控制---
let dialogVisible = ref(false);

// 权限树形数据
let treeData = ref({
	tree1: {
		title: "菜单权限配置",
		data: [],
	},
	tree2: {
		title: "数据范围",
		data: [],
	},
	tree3: {
		title: "功能权限",
		data: [],
	},
	tree4: {
		title: "岗位权限设置",
		data: [],
	},
});

// ---弹窗关闭---
let handleClose = () => {
	treeRef1.value.clearSelect();
	// treeRef2.value.clearSelect();
	// treeRef3.value.clearSelect();
	treeRef4.value.clearSelect();
};

// ---提交事件---
let treeRef1 = ref(null);
// let treeRef2 = ref(null);
// let treeRef3 = ref(null);
let treeRef4 = ref(null);
let roleId = ref();
let submitHandler = async () => {
	let arr1 = treeRef1.value.getSelectArr();
	// let arr2 = treeRef2.value.getSelectArr();
	// let arr3 = treeRef3.value.getSelectArr();
	let permissionIds = arr1;
	let postIds = treeRef4.value.getSelectArr();
	// console.log(permissionIds, postIds);
	let res = await systemApi.role.updateRolePermission({
		roleId: roleId.value,
		permissionIds,
		postIds,
	});
	if (res) {
		ElNotification({
			title: "分配成功",
			type: "success",
		});
		dialogVisible.value = false;
		emits("submit");
	}
};

let emits = defineEmits("submit");

defineExpose({
	dialogVisible,
	treeData,
	roleId,
});
</script>
<style lang="scss" scoped>
.dialog-contain {
	:deep(.el-dialog) {
		.el-dialog__header {
			background: #f7f7fa;
			margin-right: 0;
			padding: 15px 20px;
			.my-header {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				.el-dialog__title {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: bold;
					color: #1a1a1a;
					line-height: 24px;
				}
				.svg-icon {
					position: absolute;
					right: 0%;
					width: 25px;
					height: 25px;
					cursor: pointer;
				}
			}
		}
		.content-box {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.tree-box {
				border-left: 1px solid #e3e7f1;
				&:first-child {
					border-left: none;
				}
			}
		}
		.el-dialog__footer {
			text-align: center;
			.el-button {
				padding: 18px 25px;
				// border: none;
				// background: #fc7018;
				span {
					font-size: 14px;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					// color: #ffffff;
				}
				&.cancel {
					// border: 1px solid #666666;
					// background: #ffffff;
					span {
						font-weight: bold;
						// color: #666666;
					}
				}
			}
		}
	}
}
</style>
